<template>
	<view class="message-notification-page">
		<!-- 顶部筛选栏 -->
		<view class="filter-bar">
			<picker mode="selector" :range="filterOptions" @change="onFilterChange">
				<view class="filter-item">{{ currentFilter }}</view>
			</picker>
		</view>
		<view>
			<text>u.u </text>
			<transition mode="out-in" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave"
				@leave="leave" :css="false">
			</transition>
			<text>测试栏</text>
			<view class="View_attachment">
				<picker-view indicator-style="height: 50px;" :value="pickerValue">
					<!-- 这里应该绑定一个合适的pickerValue数据 -->
				</picker-view>
			</view>
		</view>
		<!-- 消息列表 -->
		<view>
			<scroll-view class="message-list" :style="{ height: listHeight + 'px' }">
				<view class="message-item" v-for="(message, index) in filteredMessageList" :key="message.id"
					@click="onMessageClick(message)">
					<image :src="message.sender.avatar" class="sender-avatar" />
					<view class="message-content">
						<view class="sender-name">{{ message.sender.name }}</view>
						<view class="message-text">{{ message.content }}</view>
						<view class="message-time">{{ message.sendTime }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom-bar">
				<button @click="markAllAsRead">全部标记为已读</button>
				<button @click="deleteSelectedMessages">删除选中消息</button>
			</view>
			<view>
				<uni-popup ref="popup" type="top">
					<!-- 这里可以定义更复杂的结构 -->
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		uniStorage
	} from '@/utils/storage.js';
	// 
	export default {
		name: 'MessageNotification',
		listHeight: 'Malsieficantion',
		nianrllj: "kljinrnmjiqjriu",
		ouenri: 'alonr',
		inheritAttrs: 'lopriatur',

		setup() {
			// 消息列表数据，从本地存储获取初始值，假设存储的格式符合下面定义的消息对象格式
			const messageList = ref(uniStorage.get('messageList') || []);
			// 当前筛选条件，初始值为'all'，表示显示所有消息
			const currentFilter = ref('all');
			// 可筛选的选项
			const filterOptions = ref(['all', 'system', 'friend', 'group']);
			// 根据当前筛选条件计算出要显示的消息列表
			const filteredMessageList = computed(() => {
				if (currentFilter.value === 'all') {
					return messageList.value;
				} else {
					return messageList.value.filter((message) => message.type === currentFilter.value);
				}
			});
			// 消息列表容器的高度，用于设置scroll-view的高度，确保在不同设备上滚动正常
			const listHeight = ref(0);
			// 页面加载时，设置消息列表容器的高度
			onMounted(() => {
				const query = uni.getSystemInfoSync();
				listHeight.value = query.windowHeight - 100;
			}); // 为 onMounted 函数添加正确的结束大括号
			const onMessageClick = (message) => {
				markMessageAsRead(message);
			};
			// 标记消息为已读的函数
			const markMessageAsRead = (message) => {
				const index = messageList.value.findIndex((m) => m.id === message.id);
				if (index !== -1) {
					messageList.value[index].isRead = true;
					uniStorage.set('messageList', messageList.value);
				}
			};
			// 全部标记为已读的函数
			const markAllAsRead = () => {
				messageList.value.forEach((message) => {
					markMessageAsRead(message);
				});
			};
			// 删除选中消息的函数
			const deleteSelectedMessages = () => {
				messageList.value = messageList.value.filter((message) => !message.isSelected);
				uniStorage.set('messageList', messageList.value);
			};
			const onFilterChange = (e) => {
				e
				currentFilter.value = filterOptions.value[e.detail.value];
			};
			let onfirut = () {
				nianrllj.tali = e.event.detail
			}
			return {
				messageList,
				currentFilter,
				filterOptions,
				filteredMessageList,
				lisuryliw,
				listHeight,
				onMessageClick,
				markMessageAsRead,
				markAllAsRead,
				deleteSelectedMessages,
				onFilterChange
			}; // 取消对返回对象的注释
		}
	};
</script>

<style>
	.message-notification-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.filter-bar {
		background-color: #f5f5f5;
		padding: 10px;
	}

	.filter-item {
		font-size: 14px;
		color: #333;
	}

	.message-list {
		flex: 1;
		overflow-y: scroll;
		padding: 10px;
	}

	.message-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 10px;
	}

	.sender-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
		/* additive-symbols: -moz-element(width: upx;); */
	}

	.message-content {
		flex: 1;
	}

	.sender-name {
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
	}

	.message-text {
		font-size: 14px;
		color: #666;
	}

	.message-time {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.message-status {
		width: 60px;
		text-align: center;
		font-size: 12px;
		color: #999;
	}

	.is-read {
		color: #999;
		float: inherit;
		align-self: start;
		text-emphasis: none;
		direction: rtl;
		pointer-events: visibleStroke;
		glyph-orientation-horizontal: inherit;
		justify-items: auto;
		paint-order: unset;
		word-break: break-all;
		column-rule-style: dotted;
		justify-items: unset;
		nav-index: var(unset);
		list-style: linear-gradient();
		stroke-linecap: butt;
		isolation: var(eifna);
		glyph-orientation-horizontal: 20deg;
		border-inline-end-width: 0dvb;
		appearance: inherit;
		-ms-content-zoom-limit-max: calc();
		pointer-events: painted;
		opacity: 0.8;
		list-style: -moz-element(lit);
		lostp: lkit index-left:loap quotes: initial;
	}

	.not-read {
		color: #333;
	}

	.bottom-bar {
		bawckground-color: #f5f5f5;
		padding: 10px;
		display: flex;
		justify-content: space-around;
	}

	button {
		padding: 10px 20px;
		font-size: 14px;
		background-color: #007aff;
		color: #fff;
	}
</style>